<template>
  <a-card :bordered="false" :style="{ marginTop: '12px',height:'513px' }">
    <span slot="title"> <a-icon type="tags" style="color:#3393FC;margin-right: 5px" theme="filled"/>历史资讯</span>
    <a slot="extra" @click="loadMore('/oa/cms/EoaCmsArticlePortal')">更多</a>
    <template>
      <a-tabs @change="callback">
        <a-tab-pane v-for="(item,index) in tablist" :key="item.id" :tab="item.menuName">
          <a-table
            ref="table"
            size="middle"
            rowKey="id"
            bordered
            :loading="loading"
            :components="draggableComponent"
            :columns="columns"
            :dataSource="dataSource"
            :customRow="customRow"
            :pagination="false"
          >
            <span slot="tittle" slot-scope="text, record">
              {{ text }} 
              <span v-if="record.isTop && record.isTop == 1" class="top">置顶</span>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </template>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'

  export default {
    name: 'EoaCmsNews',
    components: {
    },
    data () {
      return {
        columns: [
          {
            title: '标题',
            dataIndex: 'title',
            width:300,
            ellipsis: true,
            scopedSlots: { customRender: 'tittle' }
          },
          // 迭代13 去除 关键字 摘要 作者
          // {
          //   title: '关键字',
          //   dataIndex: 'keywords',
          //   ellipsis: true,
          // },
          // {
          //   title: '摘要',
          //   dataIndex: 'summary',
          //   ellipsis: true,
          // },
          // {
          //   title: '作者',
          //   dataIndex: 'author',
          //   ellipsis: true,
          // },
          {
            title: '发布时间',
            dataIndex: 'publishDate',
            align:"center",
            width: 120,
            ellipsis: true,
            customRender:function (text,item){
              return moment(text).format('YYYY-MM-DD HH:mm')
            }
          }
        ],
        dataSource: [],
        loading: false,
        url: {
          menuList: "/api/erp/workbench/article/eoaCmsMenu/findAlllist",
          articleList: "/api/erp/workbench/article/eoaCmsArticle/list",
        },
        tablist: [],
        params: {
          pageNo: 1,
          pageSize: 5,
          isPublish: '1',
          columnId: null
        }
      }
    },
    computed: {
      draggableComponent: function() {
        return this.dragResizable(this.columns)
      },
    },
    created() {
      this.findMenuAll()
    },
    methods: {
      callback(item) {
        this.params.columnId = item
        this.findArticleList()
      },
      loadMore(path) {
        let query = {
          id: this.params.columnId
        }
        this.$router.push({ path: path, query: query })
      },
      findMenuAll() {
        const that = this
        getAction(this.url.menuList).then((res) => {
          if(res.success ){
            that.tablist = res.result
            that.params.columnId = that.tablist[0].id
            that.findArticleList()
          }
        })
      },
      findArticleList() {
        const that = this
        this.loading = true
        getAction(this.url.articleList, this.params).then((res) => {
          if(res.success){
            that.dataSource = res.result.records
          }
          this.loading = false
        })
      },
      handleDetail(record) {
        this.$router.push({
          path: `/oa/cms/modules/EoaCmsArticleDetailModal/${record.id}`,
        })
      },
      // table 双击查看详情
      customRow(record) {
        return {
          on: {
            //单击事件
            click: () => {
              this.handleDetail(record)
            },
            //双击事件
            dblclick: event => {
              this.handleDetail(record)
            }
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
/deep/.ant-table-thead > tr > th {
  text-align: center;
}
.top{
  display: inline-block;
  border: 1px solid #1E6FFF;
  padding: 1px 3px;
  margin-left: 4px;
  background: #1E6FFF;
  border-radius: 4px;
  font-size: 12px;
  color: #ffffff;
}
</style>
